type
status
date
slug
summary
tags
category
icon
password
Hello! I am a Year 1 student at the University of Southampton.
I currently possess proficiency in HTML, CSS, JavaScript, Java, C/C++ and Python.
I am still diligently studying computer fundamentals.
I would greatly appreciate your valuable feedback if you are interested. 🚀
📝 About This Web & Blog
1️⃣ Tech Stack & Core Tools
My website is built with the following technologies:
- Frontend Framework: Next.js (React)
- Data Source: Notion (used as a headless CMS)
- Deployment Platform: Vercel
- Theme System: Multiple switchable preset themes (e.g.,
heo,next)
- Styling Tools: Tailwind CSS + custom theme CSS
- Feature Extensions: Notion API, comment system, SEO optimization, etc.
2️⃣ Core Code Structure Analysis
Key Directory Overview
3️⃣ Website Setup Process
Step 1: Initial Configuration
I customized the
blog.config.js file to define core parameters such as my Notion page ID, theme, author info, and domain:Step 2: Connecting the Notion Database
- Cloning the Notion Template:
I cloned this Notion template to ensure field compatibility.
- Data Fetching Flow:
lib/notion/client.js fetches data from the Notion API, and [...slug].js injects it into the theme components:Step 3: Theme Customization
I selected the
heo theme, which controls layout and styling:- Location:
themes/heo/
- Key Components:
Layout.js– Overall layoutHeader.js– Navigation bar (displaysAUTHOR)Footer.js– Footer (showsBIOor copyright)components/– Post cards, comments, and other subcomponents
Step 4: Deployment on Vercel
- Environment Variables:
I set sensitive data like
NOTION_PAGE_ID in Vercel (see config docs).- Automated Deployment:
.github/workflows/deploy.yml ensures deployments are triggered whenever I push new code.4️⃣ Key Features
Pseudo-static Paths (PSEUDO_STATIC)
Implemented via
rewrites in next.config.js.Theme Switching Mechanism
The
THEME value in blog.config.js dynamically imports the corresponding theme’s components:Notion Data Caching
This uses Next.js Incremental Static Regeneration (ISR) to reduce redundant requests.
5️⃣ Optimization & Debugging Tips
Fixing Missing Author Bio
According to my code,
BIO should render in the theme’s Footer or About component. My debugging approach:- Check
themes/heo/Footer.jsfor something like:
- If not present, I either add it manually or confirm with the theme author whether it’s supported.
Local Development
Then I open
http://localhost:3000 and use browser dev tools (F12) to check for errors.📎 Reference
- Author:Qi Liu
- URL:https://skim67.vercel.app//Technology%20Sharing/example-6
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!
